<template>
	<!--完善个人信息-->
	<view class="content">
		<view class="details-from">
			<form>
				<view class="ad-contant"><view>个人基本信息</view></view>
				
				<view class="uni-details-list">
					<view class="title">个人昵称:</view>
					<view><input class="uni-input-02" name="input" placeholder="请输入昵称" v-model="customer.nickName" /></view>
				</view>
				
				<view class="uni-details-list">
					<view class="title">个人邮箱:</view>
					<view><input class="uni-input-02" name="input" placeholder="请输入个人邮箱" v-model="customer.email" /></view>
				</view>
				
				<view class="uni-details-list">
					<view class="title">个人电话:</view>
					<view><input class="uni-input-02" name="input" placeholder="请输入个人电话" v-model="customer.phone"  type="tel" maxlength="11"/></view>
				</view>

				<view class="ad-button">
					<button form-type="submit" @tap="saveCustomer" class="button">提交</button>
					<button type="default" form-type="reset" class="button">清空数据</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			customer: {
				nickName: '',  //昵称
				email: '',     //邮箱
				phone: ''      //电话
			}
		};
	},
	onLoad() {
		//根据id获取用户数据
		var me = this;
		var userinfo = uni.getStorageSync('user');
		//打印数值
		console.log('user' + JSON.stringify(userinfo));
		uni.request({
			url: me.$ServerUrl + '/invoice/api/customer/getCustomerById', //根据ID获取用户数据
			header: {
				'content-type': 'application/json' // 默认值
			},
			data: {
				id: userinfo.id
			},
			method: 'GET',
			success(res) {
				console.log(res);
				me.customer = res.data;
				console.log('-------获取成功-----');
			}
		});
	},
	methods: {
		//保存用户数据
		saveCustomer() {
			var me = this;
			var userinfo = uni.getStorageSync('user');
			//打印数值
			console.log('user' + JSON.stringify(userinfo));
			// var iphoneReg = /^1[0-9]{10}$/
			// var emailReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
			// if(!iphoneReg.test(this.customer.phone)){
			// 	uni.showToast({
			// 		title:'手机号码格式不正确，请重新填写',
			// 		icon:'none'
			// 	})
			// }else if(!emailReg.test(this.customer.email)){
			// 	uni.showToast({
			// 		title:'邮箱端口号填写码格式不正确，请重新填写',
			// 		icon:'none'
			// 	})
			// }else{
				uni.request({
					url: me.$ServerUrl + '/invoice/api/customer/saveCustomer', //修改个人信息
					header: {
						'content-type': 'application/json' // 默认值
					},
					data: {
						id: userinfo.id,
						nickName: this.customer.nickName,
						email: this.customer.email,
						phone: this.customer.phone
					},
					method: 'POST',
					success(res) {
						console.log(res);
						console.log('-------增加成功-----');
						uni.showModal({
							content: '提交成功',
							showCancel: false,
							success() {
								uni.switchTab({
									url: '/pages/user/mine/index',
									success() {
										let page = getCurrentPages().pop(); //跳转页面成功之后
										if (!page) return;
										page.onLoad(); //如果页面存在，则重新刷新页面
									}
								});
							}
						});
					}
				});
			
			
		}
	}
};
</script>

<style>
page {
	width: 100%;
	height: 100%;
	background-color: #e1e5eb;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.details-from {
	width: 100%;
	height: 100%;
	padding: 10px;
}
.ad-contant {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin: 10px;
}
.uni-details-list {
	border: 1px solid #ffffff;
	display: flex;
	background-color: #ffffff;
	align-items: center;
	padding: 10px;
	margin-bottom: 5px;
	border-radius: 10px;
	margin-left: 10px;
	margin-right: 10px;
}
.title {
	font-size: 14px;
}
.uni-input-01 {
	font-size: 14px;
	margin-left: 35px;
}
.uni-input-02 {
	font-size: 14px;
	margin-left: 10px;
}
.button {
	background-color: #4c9800;
	color: #ffffff;
	width: 100%;
	margin: 10px;
	font-size: 16px;
}
.ad-button {
	display: flex;
}
</style>
